import {
  DownloadOutlined,
  EllipsisOutlined, IeOutlined,
  ShareAltOutlined,
} from '@ant-design/icons';
import { Avatar, Card, Dropdown, List, Menu, message, Tooltip } from 'antd';
import React from 'react';
import type { ListItemDataType } from '../../data.d';
import stylesApplications from './index.less';

export function formatWan(val: number) {
  const v = val * 1;
  if (!v || Number.isNaN(v)) return '';

  let result: React.ReactNode = val;
  if (val > 10000) {
    result = (
      <span>
        {Math.floor(val / 10000)}
        <span
          style={{
            position: 'relative',
            top: -2,
            fontSize: 14,
            fontStyle: 'normal',
            marginLeft: 2,
          }}
        >
          万
        </span>
      </span>
    );
  }
  return result;
}

const Applications: React.FC = () => {
  // 获取tab列表数据
  const  data: any  =  [
    {
      id: 'xx01',
      title: "河北工业大学官网",
      logo: '',
      description: '河北工业大学始建于1903年，前身源于北洋工艺学堂，是河北省唯一一所211高校。' ,
      updatedAt: new Date(),
      member: '河北工业大学官网',
      href: 'https://www.hebut.edu.cn/'
    },
    {
      id: 'xx02',
      title: "电气工程学院官网",
      logo: '',
      description: '电气工程学院有90年的发展历史，起源于1929年设立的机电工程系。' ,
      updatedAt: new Date(),
      member: '电气工程学院',
      href: 'https://ee.hebut.edu.cn/'
    },
    {
      id: 'xxx1',
      title: 'IEEE Xplore Digital Library',
      logo: '',
      description: 'IEEE（电气和电子工程师学会）的数字图书馆，提供大量的学术文章和研究论文。' ,
      updatedAt: new Date(),
      member: 'IEEE Xplore Digital Library',
      href: 'https://ieeexplore.ieee.org/Xplore/home.jsp'
    },
    {
      id: 'xxx2',
      title: "Bilibili",
      logo: '',
      description: 'B站学习区',
      updatedAt: new Date('2017-07-24'),
      member: 'Bilibili',
      href: 'https://www.bilibili.com/'
    },
    {
      id: 'xxx3',
      title: "中国大学MOOC",
      logo: '',
      description: '中国大学MOOC',
      updatedAt: new Date(),
      member: '中国大学MOOC',
      href: 'https://www.icourse163.org/'
    },
    {
      id: 'xxx4',
      title: "CSDN",
      logo: '',
      description: 'CSDN',
      updatedAt: new Date(),
      member: 'CSDN',
      href: 'https://www.csdn.net/'
    },
    {
      id: 'xxx5',
      title: "ProcessOn",
      logo: '',
      description: '免费在线流程图思维导图',
      updatedAt: new Date(),
      member: 'ProcessOn',
      href: 'https://www.processon.com/'
    }
  ]

  return (
    <List<ListItemDataType>
      rowKey="id"
      className={stylesApplications.filterCardList}
      grid={{ gutter: 24, xxl: 3, xl: 2, lg: 2, md: 2, sm: 2, xs: 1 }}
      dataSource={data || []}
      renderItem={(item) => (
        <List.Item key={item.id}>
          <Card
            hoverable
            bodyStyle={{ paddingBottom: 20 }}
            actions={[
              <Tooltip key="download" title="进入官网">
                <IeOutlined  onClick={()=>{
                  window.open(item.href)
                }}/>
              </Tooltip>,
              <Tooltip title="分享" key="share">
                <ShareAltOutlined onClick={()=>{
                  // 获取要复制的内容（可以根据需要进行自定义）
                  const textToCopy = item.href;
                  navigator.clipboard.writeText(textToCopy)
                    .then(() => {
                      message.success("已将链接复制到剪切板上")
                    })
                }}/>
              </Tooltip>
            ]}
          >
            <Card.Meta avatar={<Avatar size="small" src={item.avatar} />} title={item.title} />
            <div className={stylesApplications.cardItemContent}>
              <p/>
              <p>{item.description}</p>
            </div>
          </Card>
        </List.Item>
      )}
    />
  );
};

export default Applications;
